@height: 32px;
@color: #00c9b7;

.select-animation() {
  transition: all 0.3s;
}

.select-container {
  @apply text-left relative;
  height: @height;

  .select-title {
    @apply w-full flex items-center justify-between border border-solid rounded cursor-pointer text-sm px-4;
    border-color: #eee;
    height: @height;
    line-height: @height;
    color: #aaa;
    height: 30px;

    &.disabled {
      cursor: not-allowed;
      background: #f5f5f5;
    }

    .select-title-text {
      @apply flex-1;
    }

    .select-title-arrow {
      margin-left: 10px;
      width: 14px;
      height: 14px;
      .select-animation();
      &.activeEnter {
        transform: rotate(0deg);
      }

      &.activeLeave {
        transform: rotate(180deg);
      }
    }
  }

  .select-options {
    @apply font-normal absolute left-0 top-10 right-0 z-1  rounded text-sm text-main cursor-pointer;
    font-family: PingFang SC;

    &.unactive {
      z-index: 0 !important;
    }

    .select-items-box {
      @apply overflow-hidden bg-white rounded;
      .select-animation();
      box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.1);
      .select-items {
        @apply overflow-y-auto p-4 text-center;
        min-height: 100px;
        max-height: 200px;
        width: calc(100% - 2px);
        border-radius: 0 0 5px 5px;
        margin: 0 auto;
        & > ul {
          list-style: none;
        }

        &::-webkit-scrollbar {
          width: 2px;
        }

        &::-webkit-scrollbar-corner,
        &::-webkit-scrollbar-track {
          background-color: transparent;
        }

        &::-webkit-scrollbar-thumb {
          background-color: #999;
        }

        &.select-items-flex {
          cursor: not-allowed;
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;
          font-size: 12px;
          color: #999;

          & > img {
            @apply h-fit;
            width: 30px;
          }
        }

        .select-item {
          @apply cursor-pointer font-normal text-main;
          height: @height;
          line-height: @height;

          &.active {
            @apply text-theme font-semibold rounded;
            background: #ffece1;
          }

          &:hover {
            .select-animation();
            background: #f7f8fa;
          }
        }
      }
    }
  }
}
